<template>
  <div class="nav">
    <div class="tab" 
      v-for="(item, i) in nav" 
      v-if="!item.role||item.role.indexOf(parseInt($store.state.userInfo.role)) !== -1"
      :class="{'choose': item.path&&($route.path==item.path)}">
      <a v-if="item.path||item.href" @click="jump(item.path)" :href="item.href">
        <span class="list-name"
        :class="{'choose': item.show}">
          <span class="icon-nav iconfont"
          :class="item.icon">
          </span>
          <span class="title-word">{{ item.name }}</span>
        </span>
      </a>
      <div v-if="item.child" 
        class="list">
        <span class="list-name" @click="showHide(item)" >
          <span class="icon-nav iconfont"
          :class="item.icon">
          </span>
          <span class="title-word">{{ item.name }}</span>
          <span class="iconfont icon-point" 
          ></span>
          <!-- :class="{'icon-angle-down': !item.show, 'icon-angle-up':  item.show}" -->
        </span>
          <div v-for="item2 in item.child"  
          v-if="!item2.role||item2.role.indexOf(parseInt($store.state.userInfo.role)) !== -1"
          :class="{'choose': item2.path&&($route.path==item2.path) || (item2.childPath&&item2.childPath.indexOf($route.path.split('/')[1])!==-1)}"
          class="children">
          <!-- v-show="item.show" -->
            <a @click="jump(item2.path)" :href="item2.href">
              <span class="list-child">
                <span class="child-word">{{ item2.name }}</span>
            </span>
            </a>
          </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  import Vue from 'vue';
  import { shareNav } from 'common/constants/navConfig';
  export default {
    name: 'sp-nav',

    data () {
      return {
        nav: shareNav
      };
    },
    mounted () {
      this.init();
    },
    components: {
    },
    methods: {
      init () {
        this.navInit();
      },
      pageChange () {
        this.navInit();
      },
      jump (path) {
        this.$router.push(path);
      },
      showHide (item, e) {
        Vue.set(item, 'show', !item.show);
      },
      navInit () {
        let _nav = this.nav,
            i = 0,
            n = 0;
        for (; i < _nav.length; i++) {
          if (_nav[i].child) {
            for (; n < _nav[i].child.length; n++) {
              if (_nav[i].child[n].path === this.$route.path) {
                this.titleName = _nav[i].titleName || _nav[i].child[n].name;
                this.titleHide = _nav[i].titleHide || _nav[i].child[n].titleHide;
                return;
              }
            }
            n = 0;
          } else {
            if (_nav[i].path === this.$route.path) {
              this.titleName = _nav[i].titleName || _nav[i].name;
              this.titleHide = _nav[i].titleHide;
                return;
            }
          }
        }
        this.titleName = '';
      }
    }
  };
</script>

<style lang="less" scoped>
  .nav{
    width: 240px;
    .icon-point{
      font-size: 10px;
    }
    .icon-nav{
      font-size: 20px;
      display: inline-block;
      margin-right: 35px;
      margin-left: 4px;
    }
    .tab{
      font-size: 14px;
      line-height: 50px;
      // cursor: pointer;
      .list-name{
        display: table;
        padding-left: 30px;
        box-sizing: border-box;
        width: 100%;
        color: #9c9c9f;
        background-color: #38383e;
        // &:hover{
        //   background-color: #2d2d32;
        // }
        >span{
          vertical-align: middle;
        }
        .title-word{
          padding-left: 4px;
          width: 60px;
          display: inline-block;
          margin-right: 30px;
        }
      }
      .children{
        cursor: pointer;
      }
      a{
        cursor: pointer;
        .list-name{
           &:hover{
            background-color: #2d2d32;
          }
        }
      }
      .list{
        .list-child{
          background-color: #1c1c1f;
          display: table;
          width: 100%;
          color: #9c9c9f;
          text-align: center;
          &:hover{
            background-color: #001528;
          }
          span{
          }
        }
        &:hover{
          .children{
            display: block;
          }
        }
      }
    }
    .choose{
      border-left: 4px solid #FE6C3B;
      a{
        span{
          color: #FFF;
        }
        .list-child{
          .child-word{
            margin-left: -4px;
          }
        }
        .list-name{
          .title-word{
          }
          .icon-nav{
            margin-left: 0;
          }
        }
      }
    }
  }
</style>
